<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="test1"></div>
		<script>
			layui.use(['transfer', 'layer', 'form', 'laydate'], function() {
				var transfer = layui.transfer;
				var layer = layui.layer;
				var form = layui.form;
				var laydate = layui.laydate;
				var $ = layui.$;

				//左边角色
				$.post(globalData.server + "GetRolesAll", {
					"token": globalData.myToken
				}, function(data) {
					transfer.render({
						elem: '#test1', //属性，绑定元素
						data: data, //数据源
						parseData: function(res) { //将返回值转换为穿梭框源的固定格式
							return {
								"value": res.rid,
								"title": res.rname

							}
						},
						id: 'role_transfer_id' //定义索引

					});
					//右边角色  指定角色
					var rData = []; //定义空数组
					$.post(globalData.server + "GetRolesByUserIdLayUI", {
						"uid": 1, //该用户指定id
						"token": globalData.myToken
					}, function(res) { //请求后的回调函数，res--该用户的所有角色的数组
						if(res.count > 0) {
							$.each(res.data, function(index, value) {
								rData[index] = value.rid;
							});
						}
						//开始渲染穿梭框
						transfer.render({
							elem: '#test1', //绑定元素
							title: ['系统所有角色', '当前用户角色'],
							data: data,
							parseData: function(res) {
								return {
									"value": res.rid, //数据值
									"title": res.rname //数据标题

								}
							},
							value: rData, //用户已有角色
							id: 'role_transfer_id', //定义索引
							onchange: function(obj, index) { //如果数据来自左边，index为0，否则为1    onchange相当于一个属性
								if(index == "0") {
									//设置用户角色，给用户添加角色
									for(var i = 0; i < obj.length; i++) {
										$.post(globalData.server + "AddUserToRole", {
											"uid": 1,
											"rid": obj[i].value,
											"token": globalData.myToken
										}, "json");
									}
								} else {
									//删除用户角色
									for(var i = 0; i < obj.length; i++) {
										$.post(globalData.server + "RemoveUserFromRole", {
											"uid": 1,
											"rid": obj[i].value,
											"token": globalData.myToken
										}, "json");
									}
								}
							}
						});
					}, "json");
				}, "json");
			});
		</script>
	</body>

</html>